
async function func() {
  //通过请求获取全部数据
  const res = await axios({
    url: '/dashboard',
    headers: {
      Authorization: localStorage.getItem("token")
    }
  })
  const obj = res.data.overview
  for (const key in obj) {
    document.querySelector(`[name=${key}]`).innerHTML = obj[key]
  }
  console.log(res);
  //线性图
  function lineRender(){
    const myChartLine = echarts.init(document.querySelector("#line"));
    const year = res.data.year
    const salarys = year.map(e => e.salary)
    const months = year.map(e => e.month)
    const OptionLine = {
      // 标题
      title: { text: "2021年全学科薪资走势" },
      // x轴的样式
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: months,
        // 线段
        axisLine: {
          // 线的样式
          lineStyle: {
            color: "gray", // 颜色
            type: "dashed",
          },
        },
      },
      // 提示框 设置了该属性 就会显示提示框
      tooltip: {},
      yAxis: {
        type: "value",
        // 分割线
        splitLine: {
          show: true, // 显示
          // 线的样式
          lineStyle: {
            color: ["#d6d6d6"], // 颜色
            type: "dashed", // 类型
          },
        },
      },
      // 绘图网格
      grid: {
        left: 50, // 左侧的间隙
      },
      // 图形的颜色
      color: ["#608cff"],
      series: [
        {
          data: salarys,
          // 平滑曲线
          smooth: true,
          type: "line",
          // 标记的大小
          symbolSize: 15,
          // 线段的样式
          lineStyle: {
            width: 8, // 粗细
          },
          // 区域的样式
          areaStyle: {
            // 区域的颜色
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0, // 开头
                  color: "#52a1fa", // 0% 处的颜色
                },
                {
                  offset: 0.8, // 结尾
                  color: "#ffffff", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
      ],
    };
    myChartLine.setOption(OptionLine)
  }
  lineRender()
  //饼状图
  function pieRender(){
    const salaryData = res.data.salaryData
    const labels = salaryData.map(e => (e.label))
    const g_counts = salaryData.map(e => (e.g_count))
    const b_counts = salaryData.map(e => (e.b_count))
    const data = labels.map((e, i) => ({ name: e, value: (g_counts[i] + b_counts[i]) }))
    //Echart渲染饼状图
    const myChartsalary = echarts.init(document.querySelector("#salary"));
    const optionsalary = {
      title: {
        text: "班级薪资分布"
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        bottom: '30',
        left: 'center'
      },
      color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a'],
      series: [
        {
          name: '班级薪资分布',
          type: 'pie',
          radius: ['55%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 20,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: data
        }
      ]
    }
    myChartsalary.setOption(optionsalary)
  }
  pieRender()
  //每组薪资
  function classInfoRender(data) {
    const myChartClass = echarts.init(document.querySelector("#lines"));
    const optionClass = {
      xAxis: {
        type: 'category',
        // 轴线
        axisLine: {
          // 样式
          lineStyle: {
            // 虚线
            type: 'dashed',
            // 颜色
            color: '#bebebe'
          }
        },
        data: data.names
      },
      // 提示框
      tooltip: {},
      // 颜色
      color: [
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#65dcb2' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#d2f0e7' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        },
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#4a9fed' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#d6e7f6' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        }
      ],
      // y轴
      yAxis: {
        type: 'value',
        // 分割线
        splitLine: {
          // 样式
          lineStyle: {
            // 虚线
            type: 'dashed'
          }
        }
      },
      // 绘图网格
      grid: {
        left: 50,
        right: 40
      },
      series: [
        // 多个图表
        {
          data: data.hopeSalarys,
          type: 'bar'
        },
        {
          data: data.salarys,
          type: 'bar'
        }
      ]
    };
    myChartClass.setOption(optionClass)
  }
  //封装每组薪资数据处理函数
  function dealData(data) {
    const names = []
    const hopeSalarys = []
    const salarys = []
    for (const key in data) {
      names[key] = data[key].name
      hopeSalarys[key] = data[key].hope_salary
      salarys[key] = data[key].salary
    }
    const classSalaryData = {
      names,
      hopeSalarys,
      salarys,
    }
    return classSalaryData
  }
  //初始化渲染
  const groupDataInit = res.data.groupData[1]
  classInfoRender(dealData(groupDataInit))
  //蓝色按钮事件
  document.querySelector("#btns").addEventListener("click", e => {
    if (e.target.classList.contains("btn-xs")) {
      document.querySelector("#btns .btn-blue").classList.remove("btn-blue")
      e.target.classList.add("btn-blue")
      const groupDataTarget = res.data.groupData[e.target.innerText]
      classInfoRender(dealData(groupDataTarget))
    }
  })
  //男女薪资
  function genderInfoRender(){
    const myChartGender = echarts.init(document.querySelector("#gender"));
    //男女薪资数据处理
    const boySalary =res.data.salaryData.map(e=>({value:e.b_count,name:e.label}))
    const girlSalay = res.data.salaryData.map(e=>({value:e.g_count,name:e.label}))
    const optionGender= {
      title: [
        {
          text: '男女薪资分布'
        },
        {
          text: '男生',
          left: 'center',
          top: '48%',
          textStyle: {
            fontSize: '15'
          }
        },
        {
          text: '女生',
          left: 'center',
          top: '88%',
          textStyle: {
            fontSize: '15'
          }
        }
      ],
      tooltip: {
        trigger: 'item'
      },
      // 颜色
      color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a'],
      series: [
        {
          name: '男生薪资',
          type: 'pie',
          // 内外半径
          radius: ['20%', '30%'],
          // 位置
          center: ['50%', '30%'],
          data: boySalary,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        },
        {
          name: '女生薪资',
          type: 'pie',
          radius: ['20%', '30%'],
          center: ['50%', '70%'],
          data: girlSalay,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    myChartGender.setOption(optionGender)
  }
  genderInfoRender()
  //地域薪资
  const provinceData = res.data.provinceData
  console.log(provinceData);
  const dataList = [
    { name: '南海诸岛', value: 0 },
    { name: '北京', value: 0 },
    { name: '天津', value: 0 },
    { name: '上海', value: 0 },
    { name: '重庆', value: 0 },
    { name: '河北', value: 0 },
    { name: '河南', value: 0 },
    { name: '云南', value: 0 },
    { name: '辽宁', value: 0 },
    { name: '黑龙江', value: 0 },
    { name: '湖南', value: 0 },
    { name: '安徽', value: 0 },
    { name: '山东', value: 0 },
    { name: '新疆', value: 0 },
    { name: '江苏', value: 0 },
    { name: '浙江', value: 0 },
    { name: '江西', value: 0 },
    { name: '湖北', value: 0 },
    { name: '广西', value: 0 },
    { name: '甘肃', value: 0 },
    { name: '山西', value: 0 },
    { name: '内蒙古', value: 0 },
    { name: '陕西', value: 0 },
    { name: '吉林', value: 0 },
    { name: '福建', value: 0 },
    { name: '贵州', value: 0 },
    { name: '广东', value: 0 },
    { name: '青海', value: 0 },
    { name: '西藏', value: 0 },
    { name: '四川', value: 0 },
    { name: '宁夏', value: 0 },
    { name: '海南', value: 0 },
    { name: '台湾', value: 0 },
    { name: '香港', value: 0 },
    { name: '澳门', value: 0 }
  ]
  dataList.forEach(item=>{
    const res = provinceData.find(pv=>pv.name.includes(item.name))
    res&&(item.value=res.value)
  })
  console.log(dataList);
  const myChartMap= echarts.init(document.querySelector("#map"));
  const optionMap = {
    title: {
      text: '籍贯分布',
      top: 10,
      left: 10,
      textStyle: {
        fontSize: 16
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} 位学员',
      borderColor: 'transparent',
      backgroundColor: 'rgba(0,0,0,0.5)',
      textStyle: {
        color: '#fff'
      }
    },
    visualMap: {
      min: 0,
      max: 6,
      left: 'left',
      bottom: '20',
      text: ['6', '0'],
      inRange: {
        color: ['#ffffff', '#0075F0']
      },
      show: true,
      left: 40
    },
    geo: {
      map: 'china',
      roam: false,
      zoom: 1.0,
      label: {
        normal: {
          show: true,
          fontSize: '10',
          color: 'rgba(0,0,0,0.7)'
        }
      },
      itemStyle: {
        normal: {
          borderColor: 'rgba(0, 0, 0, 0.2)',
          color: '#e0ffff'
        },
        emphasis: {
          areaColor: '#34D39A',
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    },
    series: [
      {
        name: '籍贯分布',
        type: 'map',
        geoIndex: 0,
        data: dataList
      }
    ]
  }
  myChartMap.setOption(optionMap)
}
func()
